<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 设备借用->借用记录 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <!-- <el-cascader :options='options' filterable v-model='op.options' class='handle-input mr10'></el-cascader> -->
        <el-input style="width: 250px" v-model="query.cgText" placeholder="输入关键字" class="handle-input mr10" clearable>
        </el-input>
        <el-select v-model="query.taskStatus" placeholder="借用状态" clearable size="small" style="width: 240px">
          <el-option v-for="dict in options1.taskStatus" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 8px" size="mini" @click="search">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<!--        <el-button type='primary' icon='el-icon-plus' size="mini" class='handle-del mr10' @click='handingAdd'>新增</el-button>-->
      </div>
      <el-table
        v-loading="loading"
        :data="process.generalWorld"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column label="序号" type="index" align="center" width="50"> </el-table-column>
        <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
        <el-table-column prop="user_name" label="借用人姓名" align="center"></el-table-column>
        <el-table-column prop="phonenumber" label="借用人手机号" align="center"></el-table-column>
        <el-table-column prop="start_time" label="借用时间" align="center" :formatter="formatData"></el-table-column>
        <el-table-column prop="expect_time" label="预计归还时间" align="center" :formatter="formatData"></el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="scope" >
            <span :class="changeRed(scope.row.state)">{{ formatStatus(scope.row.state) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="260" >
          <template slot-scope="scope" v-if="scope.row.state!= 0">
            <el-button type="text"   icon="el-icon-edit" @click="handleEdit(scope.row)" >修改预计归还时间 </el-button>
          </template>
        </el-table-column>

      </el-table>
      <div style="text-align: center">
        <el-pagination
          background
          layout="total,sizes,prev, pager, next,jumper"
          :current-page="pageInfo.currentPage"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.pageTotal"
          :page-sizes="[5, 10, 20, 50]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <!--添加页面-->
    <el-dialog :title="this.title" :visible.sync="addVisible" width="400px" append-to-body>
      <div style="height: 250px; font-size: 12px" class="equip">
        <el-form ref="equip" :model="equip" label-width="80px" class="test">
          <el-form-item label="设备名" prop="name">
            <el-input v-model="equip.name" style="width: 70%" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="借用人" prop="user_name" >
            <el-input v-model="equip.user_name"  style="width: 70%" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="归还时间" prop="buy_date">
            <div>
              <el-date-picker v-model="equip.expect_time" type="datetime" default-time="12:00:00" style="width: 70%" >
              </el-date-picker>
            </div>
          </el-form-item>


          <el-form-item label="设备状态" prop="state">
            <el-select v-model="equip.state"  :disabled=this.canable style="width: 70%">
              <el-option label="已归还" value="0"></el-option>
              <el-option label="未归还" value="1"></el-option>
              <el-option label="超时未归还" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div style='text-align: right;margin-top: 20px;'>
        <el-button type="primary" @click="passAdd">确定</el-button>
        <el-button @click="remove">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '../../utils/common';
import variable from '../../utils/request';
import {getInfo} from '@/api/login';

export default {
  name: 'equip',
  data() {
    return {
      options: [],
      options1: {
        taskStatus: [
          {
            label: '已归还',
            value: '0'
          },
          {
            label: '未归还',
            value: '1'
          },
          {
            label: '超时未归还',
            value: '3'
          }
        ]
      },
      query: {
        cgText: '',
        taskStatus: ''
      },
      process: {
        generalWorld: []
      },
      look: {
        cgId: '',
        cgText: ''
      },
      // add:{
      //     cgText:''
      // },
      equip: {
        deptId: ''
      },
      equips: {},
      title: '添加设备',
      clickType: '',
      value: '',
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        pageTotal: 80
      },

      processId: '',
      tableData: [],
      handingData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      TransferVisible: false,
      lookVisible: false,
      addVisible: false,

      pageTotal: 0,
      idx: -1,
      id: -1,
      password2: '',
      dis: true,
      collectInfo: {},
      transferList: [],
      mark: '2',
      loading: true,
      canable: false,
    };
  },
  created() {
    getInfo().then((res) => {
      console.log("id"+res.data.user.userId);
      localStorage.setItem("user_id",res.data.user.userId)
    });
    this.processGeneralData();
    this.dept();
  },
  methods: {
    //设备列表
    processGeneralData() {
      this.loading = true;
      let json = {
        deptid: '',
        state: this.query.taskStatus,
        mark: this.mark,
        keywords: this.query.cgText,
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.currentPage
      };
      console.log(json);
      variable.getaxiosPost('/borrowingRecords/selectStudentlist', json).then((res) => {
        console.log(res);
        if (res.data) {
          this.pageInfo.pageTotal = res.data.data.total;
          this.process.generalWorld = res.data.data.list;
          console.log(res.data.list);
        }
        this.loading = false;
      });
    },
    changeRed(row){
      if (row == 3){
          return 'red_color';
      }
      return '';
    },
    // 表单重置
    resetQuery() {
      // this.query = {};
      Object.keys(this.query).forEach(key=>{this.query[key]=''})
      this.processGeneralData();
    },
    //搜索
    search() {
      this.processGeneralData();
    },
    //获取实验室
    dept() {
      let data = {
        dept_id: ''
      };
      variable.getaxiosPost('/laboratory/findAll', data).then((res) => {
        console.log(res.data);
        this.options = res.data.list;
        console.log(this.options);
      });
    },
    // 状态过滤
    formatStatus(val) {
      return val == 0 ? '已归还' : val == 1 ? '未归还' :val == 3 ? '超时未归还':   '';
      // return val == 0 ? '正常' : val == 1 ? '出借中' : val == 2 ? '损坏' :  '';
    },
    //时间转换

    formatData(row, column, cellValue, index) {
      var s = new Date(cellValue);
      var time = variable.dateFormat(s);
      return time;
    },

    //取消弹框
    remove() {
      console.log(this.equip);
      this.equip = this.equips;
      this.addVisible = false;
    },
    //搜索
    // search(){
    //     this.pageInfo.currentPage = 1
    //     this.processGeneralData()
    // },

    //流转记录

    // 修改操作
    handleEdit(row) {
      this.addVisible = true;
      this.canable = true;
      console.log(row);
      this.title = '设备详情';
      this.clickType = 'update';
      this.equip = JSON.parse(JSON.stringify(row));
      this.equip.state = row.state;
      console.log(this.equip);
      this.equip.deptid = parseInt(row.deptid);
    },
    // 添加操作
    // handingAdd() {
    //   this.addVisible = true;
    //   this.title = '添加设备信息';
    //   this.clickType = 'add';
    //   console.log(this.equip);
    //   this.equip = this.equips;
    //   this.canable = false;
    // },
    //添加
    // addEquip() {
    //   this.$refs.equip.validate((valid, value, callback) => {
    //     if (valid) {
    //       // valid是一个布尔值通过为true错误为false
    //       // 验证通过
    //       let data = {
    //         id: '',
    //         buyDate: parseTime(this.equip.buy_date, '{y}-{m}-{d}'),
    //         // buyDate: parseTime(this.equip.buy_date, '{y}-{m}-{d} {h}:{i}:{s}'),
    //         //reportTime: this.equip.reportTime,
    //         name: this.equip.name,
    //         remark: this.equip.remark,
    //         state: this.equip.state,
    //         labId: this.equip.lab_id,
    //         userId: localStorage.getItem("user_id"),
    //       };
    //       console.log(data);
    //       variable.getaxiosPost('/equip/addEquip', data).then((res) => {
    //         if (res.code == '0') {
    //           this.$message.success('添加成功', {
    //             duration: 2000
    //           });
    //           this.processGeneralData();
    //         } else {
    //           this.$message.error(res.data.message, {
    //             duration: 2000
    //           });
    //         }
    //       });
    //     } else {
    //       // 验证不通过
    //       callback(new Error(value + '格式不正确'));
    //       return false;
    //     }
    //   });
    // },
    //修改
    updateequip() {
      let data = {
        id: this.equip.id,
        name: this.equip.name,
        userName: this.equip.user_name,
        expectTime: parseTime(this.equip.expect_time, '{y}-{m}-{d} {h}:{i}:{s}'),
        // buyDate: parseTime(this.equip.buy_date, '{y}-{m}-{d} {h}:{i}:{s}'),
        state: this.equip.state,
        // attachment:this.equip.attachment
      };
      console.log(data);
       if(this.equip.state == '1'){
      variable.getaxiosPost('/borrowingRecords/updateStudentlist', data).then((res) => {
        if (res.code == '0') {
          this.$message.success('修改成功', {
            duration: 2000
          });
          this.processGeneralData();
        } else {
          this.$message.error(res.data.message, {
            duration: 2000
          });
        }
       });
    }else {
        this.$message({
          type: 'info',
          message: '此状态无法更改',
          duration: 2000
        });
      }

    },

    //提交
    passAdd() {
      console.log(this.clickType);
   if (this.clickType == 'update') {
        //修改
        this.updateequip();
        this.addVisible = false;
      }
    },
    //删除
    // handleDelete(row, index) {
    //   console.log(row.id);
    //   let json = {
    //     id: row.id
    //   };
    //   console.log(json);
    //   // console.log(index)
    //   this.$confirm('是否确定要删除此纪录', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       variable.getaxiosPost('/equip/delEquip', json).then((res) => {
    //         console.log(res);
    //         if (res.code == '0') {
    //           this.$message.success('删除成功', {
    //             duration: 2000
    //           });
    //           this.processGeneralData();
    //         } else {
    //           this.$message.error(res.data.message, {
    //             duration: 2000
    //           });
    //         }
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消删除'
    //       });
    //     });
    // },

    //确定修改
    // passUpdate(cgId, cgText) {
    //   let json = {
    //     cgId: cgId,
    //     cgText: cgText
    //   };
    //   console.log(json);
    //   variable.getaxiosPsot('/collect/updatecolectGenearlWord', json).then((res) => {
    //     console.log(res);
    //     this.editVisible = false;
    //     this.processGeneralData();
    //   });
    // },

    // 保存编辑
    // saveEdit() {
    //   this.editVisible = false;
    //   this.$message.success(`修改第 ${this.idx + 1} 行成功`);
    //   this.$set(this.tableData, this.idx, this.form);
    // },
    /**
     * 分页大小切换
     */
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.processGeneralData();
    },
    /**
     * 分页切换
     */
    handleCurrentChange(val) {
      console.log(val);
      this.pageInfo.currentPage = val;
      this.processGeneralData();
    },
    //新增
    // add() {
    //   this.editVisible = true;
    // }
  }
};
</script>

<style scoped>
.red_color{
  color: red;
}


.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}
::v-deep .equip .el-form .el-form-item .el-form-item__label{
  width: 100px!important;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
